<template>
  <div>
    <button class="show-conn-btn" @click="openConnPanel" style="margin-bottom: 16px;">连接设置</button>
    <div v-if="showConnPanel" class="connection-panel-modal">
      <div class="connection-panel">
        <div class="input-group">
          <label for="robot-ip">机器人IP:</label>
          <input type="text" id="robot-ip" v-model="ipInput" placeholder="输入机器人IP">
        </div>
        <div class="input-group">
          <label for="robot-port">端口:</label>
          <input type="text" id="robot-port" v-model="portInput" placeholder="输入端口">
        </div>
        <button @click="onConnect" :disabled="isConnected" class="connect-btn">连接</button>
        <button @click="onDisconnect" :disabled="!isConnected" class="disconnect-btn">断开连接</button>
        <button class="close-panel-btn" @click="showConnPanel = false">关闭</button>
      </div>
    </div>
    <div class="control-panel">
      <div class="speed-display">
        <div class="speed-item">
          <span class="speed-label">线速度:</span>
          <span class="speed-value">{{ linearSpeed.toFixed(2) }}</span>
          <span class="speed-unit">m/s</span>
        </div>
        <!-- <div class="speed-item">
          <span class="speed-label">X轴:</span>
          <span class="speed-value">{{ (moveX * 1.0 * (currentGear === 1 ? 0.4 : currentGear === 2 ? 0.7 : 1.0)).toFixed(2) }}</span>
          <span class="speed-unit">m/s</span>
        </div>
        <div class="speed-item">
          <span class="speed-label">Y轴:</span>
          <span class="speed-value">{{ (moveY * 1.0 * (currentGear === 1 ? 0.4 : currentGear === 2 ? 0.7 : 1.0)).toFixed(2) }}</span>
          <span class="speed-unit">m/s</span>
        </div> -->
        <div class="speed-item">
          <span class="speed-label">角速度:</span>
          <span class="speed-value">{{ angularSpeed.toFixed(2) }}</span>
          <span class="speed-unit">rad/s</span>
        </div>
      </div>
    </div>
    <div class="joystick-area">
      <div class="joystick-container left-joystick">
        <div class="joystick-label">移动控制</div>
        <VirtualJoystick type="move" :radius="moveRadius" @move="onMoveJoystick" @end="onMoveEnd" />
        <!-- <div class="joystick-info">
          <div class="coord-display">
            <span>X: {{ moveX.toFixed(2) }}</span>
            <span>Y: {{ moveY.toFixed(2) }}</span>
          </div>
        </div> -->
      </div>
      <div class="joystick-container right-joystick">
        <div class="joystick-label">旋转控制</div>
        <VirtualJoystick type="rotate" :radius="rotateRadius" @move="onRotateJoystick" @end="onRotateEnd" />
        <!-- <div class="joystick-info">
          <div class="coord-display">
            <span>旋转: {{ rotateX.toFixed(2) }}</span>
          </div>
        </div> -->
      </div>
      <div class="gear-control">
        <div class="gear-label">速度档位</div>
        <div class="gear-container">
          <div class="gear-item" :class="{ active: currentGear === 1 }" @click="setGear(1)">
            <div class="gear-number">1</div>
            <div class="gear-text">低速</div>
          </div>
          <div class="gear-item" :class="{ active: currentGear === 2 }" @click="setGear(2)">
            <div class="gear-number">2</div>
            <div class="gear-text">中速</div>
          </div>
          <div class="gear-item" :class="{ active: currentGear === 3 }" @click="setGear(3)">
            <div class="gear-number">3</div>
            <div class="gear-text">高速</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 摄像头显示区域 -->
    <div class="camera-area">
      <div class="camera-container">
        <div class="camera-header">
          <h3>📹 前置摄像头</h3>
          <div class="camera-status" :class="{ active: isConnected }">{{ isConnected ? '已连接' : '未连接' }}</div>
        </div>
        <div class="camera-display">
          <img 
            v-if="isConnected"
            :src="cameraStreamUrl"
            class="camera-stream"
            style="width:100%;height:100%;display:block;object-fit:cover;"
            @error="onCameraError"
            @load="onCameraLoad"
          />
          <div v-if="!isConnected" class="camera-placeholder">
            摄像头未连接
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import VirtualJoystick from '../components/Joystick.vue';
import { useJoystickControl } from '@/composables/useJoystickControl';
// import ROSLIB from 'roslib';
export default {
  name: 'HomePage',
  components: { VirtualJoystick },
  props: {
    robotIp: {
      type: String,
      default: '172.10.7.164'
    },
    robotPort: {
      type: String,
      default: '9090'
    },
    isConnected: Boolean,
    linearSpeed: Number,
    angularSpeed: Number,
    ros: Object, // 添加 ros 对象作为 prop
    rosConnection: Object // 添加 rosConnection 对象作为 prop
  },
  emits: ['update:robotIp', 'update:robotPort', 'connect', 'disconnect', 'setup-camera-canvas'],
  setup(props) {
    // 使用摇杆控制composable，传入rosConnection实例
    const joystickControl = useJoystickControl(props.rosConnection);
    
    return {
      // 摇杆控制方法
      onMoveJoystick: joystickControl.onMoveJoystick,
      onMoveEnd: joystickControl.onMoveEnd,
      onRotateJoystick: joystickControl.onRotateJoystick,
      onRotateEnd: joystickControl.onRotateEnd,
    };
  },
  computed: {
    moveRadius() {
      return window.innerWidth <= 480 ? 130 : 75; // 移动端移动控制更大
    },
    rotateRadius() {
      return window.innerWidth <= 480 ? 40 : 75; // 移动端旋转控制更小
    },
    cameraWidth() {
      return window.innerWidth <= 480 ? 280 : 320;
    },
    cameraHeight() {
      return window.innerWidth <= 480 ? 210 : 240;
    },
    cameraStreamUrl() {
      if (!this.isConnected || !this.robotIp) return '';
      return `http://${this.robotIp}:8080/stream?topic=/robot/front_camera/image_raw`;
    }
  },
  data() {
    return {
      showConnPanel: false,
      ipInput: this.robotIp,
      portInput: this.robotPort,
      currentGear: 2 // 默认中速
    };
  },
  mounted() {
    // HTTP流模式不需要canvas设置
  },
  methods: {
    openConnPanel() {
      this.ipInput = this.robotIp;
      this.portInput = this.robotPort;
      this.showConnPanel = true;
    },
    onConnect() {
      this.$emit('update:robotIp', this.ipInput);
      this.$emit('update:robotPort', this.portInput);
      this.$emit('connect');
      this.showConnPanel = false;
    },
    onDisconnect() {
      this.$emit('disconnect');
      this.showConnPanel = false;
    },
    setGear(gear) {
      this.currentGear = gear;
    },
    applyGear(e) {
      const gearMap = { 1: 0.4, 2: 0.7, 3: 1.0 };
      const ratio = gearMap[this.currentGear] || 1.0;
      return { x: e.x * ratio, y: e.y * ratio };
    },
    
    // 摄像头相关方法
    onCameraError() {
      console.error('摄像头流加载失败');
      // 可以在这里添加错误处理逻辑
    },
    
    onCameraLoad() {
      console.log('摄像头流加载成功');
      // 可以在这里添加加载成功后的逻辑
    }
  }
};
</script>

<style scoped>
.show-conn-btn {
  background: linear-gradient(45deg, #2ed573, #3742fa);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  padding: 3px 6px; /* 调窄上下内边距 */
  margin-bottom: 2px; /* 板块距离更近 */
  transition: all 0.3s;
}
.show-conn-btn:hover {
  background: linear-gradient(45deg, #3742fa, #2ed573);
}

.connection-panel-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.connection-panel {
  background: linear-gradient(135deg, #1e3c72, #2a5298, #1e3c72);
  color: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  padding: 32px 24px;
  min-width: 320px;
  max-width: 90vw;
}
.input-group {
  margin-bottom: 18px;
}
.input-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: white;
}
.input-group input {
  width: 90%;
  padding: 10px;
  border: 1px solid #2a5298;
  border-radius: 6px;
  font-size: 1rem;
  background: rgba(30, 60, 114, 0.9); /* 深蓝渐变背景 */
  color: #fff;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.08);
  transition: border 0.2s, background 0.2s;
}
.input-group input:focus {
  border: 1.5px solid #2ed573;
  background: rgba(46, 213, 115, 0.08);
  outline: none;
}
.connect-btn {
  background: linear-gradient(45deg, #2ed573, #17a2b8);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  margin-right: 12px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.connect-btn:disabled {
  background: #b2f7cf;
  cursor: not-allowed;
}
.disconnect-btn {
  background: linear-gradient(45deg, #ff4757, #ffb3b3);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  margin-right: 12px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.disconnect-btn:disabled {
  background: #ffd6d6;
  cursor: not-allowed;
}
.close-panel-btn {
  margin-top: 18px;
  background: #3742fa;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.close-panel-btn:hover {
  background: #2ed573;
}
.speed-display {
  background: rgba(0, 0, 0, 0.04);
  padding: 3px;
  border-radius: 12px;
  margin-top: 0px;
  margin-bottom: 0px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.speed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.speed-label {
  font-weight: bold;
  min-width: 80px;
  color: white;
}
.speed-value {
  font-family: 'Courier New', monospace;
  font-size: 1.3rem;
  color: #2ed573;
}
.speed-unit {
  color: #888;
  font-size: 1rem;
}
.control-panel {
  background: linear-gradient(135deg, #1e3c72, #2a5298, #1e3c72);
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  padding: 20px;
  margin: 0 auto;
  min-width: 320px;
  max-width: 95vw;
}
.joystick-area {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.joystick-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.joystick-label {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
}
.gear-control {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  background: rgba(30, 60, 114, 0.15);
  border-radius: 10px;
  padding: 10px 6px;
  min-width: 80px;
}
.gear-label {
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
}
.gear-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.gear-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 2px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.2s;
}
.gear-item.active {
  background: linear-gradient(45deg, #2ed573, #17a2b8);
  border-color: #2ed573;
  color: #fff;
}
.gear-number {
  font-size: 1.2rem;
  font-weight: bold;
}
.gear-text {
  font-size: 0.85rem;
  color: #fff;
}
@media (max-width: 768px) {
  .control-panel {
    padding: 10px;
    min-width: 0;
    max-width: 100vw;
    border-radius: 12px;
  }
  .connection-panel {
    padding: 16px;
    min-width: 0;
    max-width: 100vw;
    border-radius: 12px;
  }
}
@media (max-width: 480px) {
  .show-conn-btn {
    margin-bottom: 8px !important;
    padding: 5px 8px;
    font-size: 0.75rem;
  }
  .control-panel {
    padding: 1px;
    margin-bottom: 0;
    border-radius: 2px;
  }
  .speed-display {
    padding: 1px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 8px;
  }
  .joystick-area {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding-left: 8px;
    padding-right: 8px;
  }
  .left-joystick {
    align-self: flex-end; /* 移动控制靠左下 */
    margin-top: 40px;
  }
  .right-joystick {
    align-self: flex-start; /* 旋转控制靠右上 */
    margin-top: 10px;
  }
  .gear-control {
    min-width: 60px;
    padding: 6px 2px;
    gap: 6px;
    margin-top: 25px;
  }
  .gear-label {
    font-size: 0.9rem;
  }
  .gear-number {
    font-size: 1rem;
  }
  .gear-text {
    font-size: 0.75rem;
  }
}

/* 摄像头样式 */
.camera-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  padding: 0 10px;
}

.camera-container {
  background: linear-gradient(135deg, #1e3c72, #2a5298, #1e3c72);
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  padding: 20px;
  color: white;
}

.camera-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.camera-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: #fff;
}

.camera-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: bold;
  background: #ff4757;
  color: white;
  transition: background 0.3s;
}

.camera-status.active {
  background: #2ed573;
}

.camera-display {
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  height: 300px;
  display: block;
}

.camera-stream {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.camera-placeholder {
  color: #888;
  font-size: 1rem;
  text-align: center;
}

/* 移动端摄像头样式 */
@media (max-width: 768px) {
  .camera-area {
    gap: 15px;
    margin-top: 15px;
    padding: 0 5px;
  }
  
  .camera-container {
    padding: 15px;
    border-radius: 12px;
  }
  
  .camera-header h3 {
    font-size: 1.1rem;
  }
  
  .camera-display {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .camera-area {
    gap: 12px;
    margin-top: 12px;
    padding: 0 8px;
  }
  
  .camera-container {
    padding: 12px;
    border-radius: 10px;
  }
  
  .camera-header {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
  }
  
  .camera-header h3 {
    font-size: 1rem;
  }
  
  .camera-status {
    padding: 3px 10px;
    font-size: 0.8rem;
  }
  
  .camera-display {
    height: 200px;
  }
  
  .camera-placeholder {
    font-size: 0.9rem;
  }
}

/* 横屏布局 */
@media (max-width: 800px) and (orientation: landscape) {
  .camera-area {
    flex-direction: row;
    gap: 15px;
  }
  
  .camera-container {
    flex: 1;
  }
  
  .camera-display {
    min-height: 160px;
  }
}
</style>